<template>
    <view style="height: 100%">
        <view class="nav">
            <view class="list">
                <block v-for="(item, index) in goodsData" :key="index">
                    <view :class="'item ' + clas[index]" :data-index="index" @tap="xun">{{ item.title }}</view>
                </block>
            </view>
        </view>
        <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :current="current" @change="switchs">
            <swiper-item data-id="0">
                <view class="banner">
                    <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000">
                        <block v-for="(item, index) in banner0" :key="index">
                            <swiper-item>
                                <image mode="aspectFill" v-if="item.deptId != 0" :src="item.shopLogo" @tap="toShopDetail" :id="item.deptId + ',' + item.deptName + ',' + item.trainCount" />
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <scroll-view :scroll-y="true" class="scroll" @scrolltolower="bindlower">
                  <view class="listMall">
                    <block v-for="(item, index) in IndexList0" :key="index">
                        <view @tap="toProductDetail" :id="item.id" class="blocks">
                            <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                            <view style="display:flex;">
                                <view class="name">{{ item.productTitle }}</view>
                                <text class="now_price">￥{{ item.productPrice }}</text>
                            </view>
                            <view class="desc">
                                <view>{{ item.productDesc }}</view>
                                <view v-if="item.productDiscount != null">折扣：{{ item.productDiscount }}</view>
                            </view>
                            <view v-if="item.labelNames!=null&&item.labelNames!=''">
                                <text class="name">{{ item.labelNames }}</text>
                            </view>
                        </view>
                    </block>
                  </view>
                </scroll-view>
            </swiper-item>
            <swiper-item data-id="1">
                <view class="banner">
                    <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000">
                        <block v-for="(item, index) in banner1" :key="index">
                            <swiper-item>
                                <image mode="aspectFill" v-if="item.deptId != 0" :src="item.shopLogo" @tap="toShopDetail" :id="item.deptId + ',' + item.deptName + ',' + item.trainCount" />
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <scroll-view :scroll-y="true" class="scroll" @scrolltolower="bindlower">
                  <view class="listMall">
                    <block v-for="(item, index) in IndexList1" :key="index">
                        <view @tap="toProductDetail" :id="item.id" class="blocks">
                            <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                            <view style="display:flex;">
                                <view class="name">{{ item.productTitle }}</view>
                                <text class="now_price">￥{{ item.productPrice }}</text>
                            </view>
                            <view class="desc">
                                <view>{{ item.productDesc }}</view>
                                <view v-if="item.productDiscount != null">折扣：{{ item.productDiscount }}</view>
                            </view>
                            <view v-if="item.labelNames!=null&&item.labelNames!=''">
                                <text class="name">{{ item.labelNames }}</text>
                            </view>
                        </view>
                    </block>
                  </view>
                </scroll-view>   
            </swiper-item>
            <swiper-item data-id="2">
                <view class="banner">
                    <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000">
                        <block v-for="(item, index) in banner2" :key="index">
                            <swiper-item>
                                <image mode="aspectFill" v-if="item.deptId != 0" :src="item.shopLogo" @tap="toShopDetail" :id="item.deptId + ',' + item.deptName + ',' + item.trainCount" />
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <scroll-view :scroll-y="true" class="scroll" @scrolltolower="bindlower">
                  <view class="listMall">
                    <block v-for="(item, index) in IndexList2" :key="index">
                        <view @tap="toProductDetail" :id="item.id" class="blocks">
                            <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                            <view style="display:flex;">
                                <view class="name">{{ item.productTitle }}</view>
                                <text class="now_price">￥{{ item.productPrice }}</text>
                            </view>
                            <view class="desc">
                                <view>{{ item.productDesc }}</view>
                                <view v-if="item.productDiscount != null">折扣：{{ item.productDiscount }}</view>
                            </view>
                            <view v-if="item.labelNames!=null&&item.labelNames!=''">
                                <text class="name">{{ item.labelNames }}</text>
                            </view>
                        </view>
                    </block>
                  </view>
                </scroll-view>   
            </swiper-item>
            <swiper-item data-id="3">
                <view class="banner">
                    <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000">
                        <block v-for="(item, index) in banner3" :key="index">
                            <swiper-item>
                                <image mode="aspectFill" v-if="item.deptId != 0" :src="item.shopLogo" @tap="toShopDetail" :id="item.deptId + ',' + item.deptName + ',' + item.trainCount" />
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <scroll-view :scroll-y="true" class="scroll" @scrolltolower="bindlower">
                  <view class="listMall">
                    <block v-for="(item, index) in IndexList3" :key="index">
                        <view @tap="toProductDetail" :id="item.id" class="blocks">
                            <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                            <view style="display:flex;">
                                <view class="name">{{ item.productTitle }}</view>
                                <text class="now_price">￥{{ item.productPrice }}</text>
                            </view>
                            <view class="desc">
                                <view>{{ item.productDesc }}</view>
                                <view v-if="item.productDiscount != null">折扣：{{ item.productDiscount }}</view>
                            </view>
                            <view v-if="item.labelNames!=null&&item.labelNames!=''">
                                <text class="name">{{ item.labelNames }}</text>
                            </view>
                        </view>
                    </block>
                  </view>
                </scroll-view>  
            </swiper-item>
            <swiper-item data-id="4">
                <view class="banner">
                    <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000">
                        <block v-for="(item, index) in banner4" :key="index">
                            <swiper-item>
                                <image mode="aspectFill" v-if="item.deptId != 0" :src="item.shopLogo" @tap="toShopDetail" :id="item.deptId + ',' + item.deptName + ',' + item.trainCount" />
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <scroll-view :scroll-y="true" class="scroll" @scrolltolower="bindlower">
                  <view class="listMall">
                    <block v-for="(item, index) in IndexList4" :key="index">
                        <view @tap="toProductDetail" :id="item.id" class="blocks">
                            <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                            <view style="display:flex;">
                                <view class="name">{{ item.productTitle }}</view>
                                <text class="now_price">￥{{ item.productPrice }}</text>
                            </view>
                            <view class="desc">
                                <view>{{ item.productDesc }}</view>
                                <view v-if="item.productDiscount != null">折扣：{{ item.productDiscount }}</view>
                            </view>
                            <view v-if="item.labelNames!=null&&item.labelNames!=''">
                                <text class="name">{{ item.labelNames }}</text>
                            </view>
                        </view>
                    </block>
                  </view>
                </scroll-view>  
            </swiper-item>
            <swiper-item data-id="5">
                <view class="banner">
                    <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000">
                        <block v-for="(item, index) in banner5" :key="index">
                            <swiper-item>
                                <image mode="aspectFill" v-if="item.deptId != 0" :src="item.shopLogo" @tap="toShopDetail" :id="item.deptId + ',' + item.deptName + ',' + item.trainCount" />
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <scroll-view :scroll-y="true" class="scroll" @scrolltolower="bindlower">
                  <view class="listMall">
                    <block v-for="(item, index) in IndexList5" :key="index">
                        <view @tap="toProductDetail" :id="item.id" class="blocks">
                            <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                            <view style="display:flex;">
                                <view class="name">{{ item.productTitle }}</view>
                                <text class="now_price">￥{{ item.productPrice }}</text>
                            </view>
                            <view class="desc">
                                <view>{{ item.productDesc }}</view>
                                <view v-if="item.productDiscount != null">折扣：{{ item.productDiscount }}</view>
                            </view>
                            <view v-if="item.labelNames!=null&&item.labelNames!=''">
                                <text class="name">{{ item.labelNames }}</text>
                            </view>
                        </view>
                    </block>
                  </view>
                </scroll-view>  
            </swiper-item>
            <swiper-item data-id="6">
                <view class="banner">
                    <swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000">
                        <block v-for="(item, index) in banner6" :key="index">
                            <swiper-item>
                                <image mode="aspectFill" v-if="item.deptId != 0" :src="item.shopLogo" @tap="toShopDetail" :id="item.deptId + ',' + item.deptName + ',' + item.trainCount" />
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <scroll-view :scroll-y="true" class="scroll" @scrolltolower="bindlower">
                  <view class="listMall">
                    <block v-for="(item, index) in IndexList6" :key="index">
                        <view @tap="toProductDetail" :id="item.id" class="blocks">
                            <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                            <view style="display:flex;">
                                <view class="name">{{ item.productTitle }}</view>
                                <text class="now_price">￥{{ item.productPrice }}</text>
                            </view>
                            <view class="desc">
                                <view>{{ item.productDesc }}</view>
                                <view v-if="item.productDiscount != null">折扣：{{ item.productDiscount }}</view>
                            </view>
                            <view v-if="item.labelNames!=null&&item.labelNames!=''">
                                <text class="name">{{ item.labelNames }}</text>
                            </view>
                        </view>
                    </block>
                  </view>
                </scroll-view>  
            </swiper-item>
            <block v-for="(item, index) in goodsData" :key="index">
                <swiper-item :data-id="item" v-if="index > 0">
                    <block name="msgItem">
                        <scroll-view :scroll-y="true" class="scroll" :id="item.type" @scrolltolower="bindlower">
                            <view class="listMall">
                                <block v-for="(item, index) in item.list" :key="index">
                                    <view @tap="toProductDetail" :id="item.id">
                                        <view class="img"><image :src="item.productPic" mode="aspectFill" /></view>
                                        <view class="name">{{ item.productTitle }}</view>
                                        <view class="desc">{{ item.productDesc }}</view>
                                        <view>
                                            <text class="now_price">￥{{ item.productPrice }}</text>
                                        </view>
                                    </view>
                                </block>
                            </view>
                        </scroll-view>
                    </block>
                </swiper-item>
            </block>
        </swiper>
    </view>
</template>

<script>
var config = require('../../config.js');
var http = require('../../utils/httpHelper.js');
export default {
    data() {
        return {
            indicatorDots: false,

            //是否显示面板指示点
            autoplay: false,

            //是否自动切换
            current: 0,

            //当前所在index
            interval: 0,

            //自动切换时间
            duration: 200,

            //滑动时间
            clas: ['action'],

            shopPage: {
                current: 1,
                pageSize: 8,
                total: 0
            },

            productPage0: {
                current: 1,
                pageSize: 9,
                total: 0
            },

            productPage1: {
                current: 1,
                pageSize: 9,
                total: 0
            },

            productPage2: {
                current: 1,
                pageSize: 9,
                total: 0
            },

            productPage3: {
                current: 1,
                pageSize: 9,
                total: 0
            },

            productPage4: {
                current: 1,
                pageSize: 9,
                total: 0
            },

            productPage5: {
                current: 1,
                pageSize: 9,
                total: 0
            },

            productPage6: {
                current: 1,
                pageSize: 9,
                total: 0
            },

            banner0: [],
            IndexList0: [],
            banner1: [],
            IndexList1: [],
            banner2: [],
            IndexList2: [],
            banner3: [],
            IndexList3: [],
            banner4: [],
            IndexList4: [],
            banner5: [],
            IndexList5: [],
            banner6: [],
            IndexList6: [],
            timer: {},
            goodsData: ''
        };
    },
    onLoad: function () {
        var that = this;
        that.getGoodsType();
        that.getShopList(-2, function (list) {
            that.setData({
                banner0: list
            });
        });
        that.getGoodsList(-2, function (list) {
            that.setData({
                IndexList0: list
            });
        });
    },
    onShow: function () {
        uni.setNavigationBarTitle({
            title: '实体培训'
        });
    },
    methods: {
        getMoreData() {          
            var that = this;
            let len = this.clas.length;
            if (len == 1) {
                that.productPage0.current++;
                that.getGoodsList(-2, function (list) {
                    let yList = that.IndexList0;
                    yList = yList.concat(list);
                    that.setData({
                        IndexList0: yList
                    });
                });
            }
            if (len == 2) {
                that.productPage1.current++;
                that.getGoodsList(81, function (list) {
                    let yList = that.IndexList1;
                    yList = yList.concat(list);
                    that.setData({
                        IndexList1: yList
                    });
                });
            }
            if (len == 3) {
                that.productPage2.current++;
                that.getGoodsList(82, function (list) {
                    let yList = that.IndexList2;
                    yList = yList.concat(list);
                    that.setData({
                        IndexList2: yList
                    });
                });
            }
            if (len == 4) {
                that.productPage3.current++;
                that.getGoodsList(83, function (list) {
                    let yList = that.IndexList3;
                    yList = yList.concat(list);
                    that.setData({
                        IndexList3: yList
                    });
                });
            }
            if (len == 5) {
                that.productPage4.current++;
                that.getGoodsList(84, function (list) {
                    let yList = that.IndexList4;
                    yList = yList.concat(list);
                    that.setData({
                        IndexList4: yList
                    });
                });
            }
            if (len == 6) {
                that.productPage5.current++;
                that.getGoodsList(85, function (list) {
                    let yList = that.IndexList5;
                    yList = yList.concat(list);
                    that.setData({
                        IndexList5: yList
                    });
                });
            }
            if (len == 7) {
                that.productPage6.current++;
                that.getGoodsList(86, function (list) {
                    let yList = that.IndexList6;
                    yList = yList.concat(list);
                    that.setData({
                        IndexList6: yList
                    });
                });
            }
        },

        getGoodsType: function () {
            var that = this;
            http.httpGet(config.clubApi.getTrainTypes, {}, function (res) {
                if (res.code == '200') {
                    var list = res.data;
                    var goodsData = [
                        {
                            type: 0,
                            title: '全部'
                        }
                    ];
                    for (var i = 1; i < list.length + 1; i++) {
                        goodsData[i] = {
                            type: list[i - 1].dictValue,
                            title: list[i - 1].dictLabel
                        };
                    }
                    that.setData({
                        goodsData: goodsData
                    });
                    that.loadTabGoodsList(0);
                }
            });
        },

        getShopList: function (productType, callback) {
            var that = this;
            http.httpPost(
                config.clubApi.getShopList,
                {
                    appid: config.APPID,
                    pageNo: that.shopPage.current,
                    pageSize: that.shopPage.pageSize,
                    productType: productType                    
                },
                function (res) {
                    if (res.code == '200') {
                        var list = res.data.pageData;
                        if (typeof callback == 'function') {
                            callback(list);
                        }
                    }
                }
            );
        },

        getGoodsList: function (productType, callback) {
            var that = this;
            var curPage = 1;
            var curPageSize = 9;
            if (productType == -2) {
                curPage = that.productPage0.current;
                curPageSize = that.productPage0.pageSize;
            }
            if (productType == 81) {
                curPage = that.productPage1.current;
                curPageSize = that.productPage1.pageSize;
            }
            if (productType == 82) {
                curPage = that.productPage2.current;
                curPageSize = that.productPage2.pageSize;
            }
            if (productType == 83) {
                curPage = that.productPage3.current;
                curPageSize = that.productPage3.pageSize;
            }
            if (productType == 84) {
                curPage = that.productPage4.current;
                curPageSize = that.productPage4.pageSize;
            }
            if (productType == 85) {
                curPage = that.productPage5.current;
                curPageSize = that.productPage5.pageSize;
            }
            if (productType == 86) {
                curPage = that.productPage6.current;
                curPageSize = that.productPage6.pageSize;
            }
            http.httpPost(
                config.clubApi.getTrainList,
                {
                    appid: config.APPID,
                    pageNo: curPage,
                    pageSize: curPageSize,
                    productType: productType
                },
                function (res) {
                    if (res.code == '200') {
                        var list = res.data.pageData;
                        if (typeof callback == 'function') {
                            callback(list);
                        }
                    }
                }
            );
        },

        loadTabGoodsList: function (index) {
            var that = this;
            var goodsData = that.goodsData;
            if (goodsData[index].banner == undefined || goodsData[index].list == undefined) {
                var type = goodsData[index].type;
                if (type == 81) {
                    that.getShopList(81, function (list) {
                        that.setData({
                            banner1: list
                        });
                    });
                    that.getGoodsList(81, function (list) {
                        that.setData({
                            IndexList1: list
                        });
                    });
                }
                if (type == 82) {
                    that.getShopList(82, function (list) {
                        that.setData({
                            banner2: list
                        });
                    });
                    that.getGoodsList(82, function (list) {
                        that.setData({
                            IndexList2: list
                        });
                    });
                }
                if (type == 83) {
                    that.getShopList(83, function (list) {
                        that.setData({
                            banner3: list
                        });
                    });
                    that.getGoodsList(83, function (list) {
                        that.setData({
                            IndexList3: list
                        });
                    });
                }
                if (type == 84) {
                    that.getShopList(84, function (list) {
                        that.setData({
                            banner4: list
                        });
                    });
                    that.getGoodsList(84, function (list) {
                        that.setData({
                            IndexList4: list
                        });
                    });
                }
                if (type == 85) {
                    that.getShopList(85, function (list) {
                        that.setData({
                            banner5: list
                        });
                    });
                    that.getGoodsList(85, function (list) {
                        that.setData({
                            IndexList5: list
                        });
                    });
                }
                if (type == 86) {
                    that.getShopList(86, function (list) {
                        that.setData({
                            banner6: list
                        });
                    });
                    that.getGoodsList(86, function (list) {
                        that.setData({
                            IndexList6: list
                        });
                    });
                }
            }
        },

        //事件处理函数
        switchs: function (e) {
            var index = e.detail.current;
            if (index <= 6) {
                this.loadTabGoodsList(index);
                this.setData({
                    clas: []
                });
                var data = [];
                data[index] = 'action';
                this.setData({
                    clas: data
                });
            } else {
                location.reload();
            }
        },

        xun: function (e) {
            var index = e.target.dataset.index;
            this.setData({
                current: index
            });
        },

        toShopDetail: function (e) {
            var idParam = e.currentTarget.id;
            var idParamAry = idParam.split(',');
            if (idParamAry[2] > 0) {
                uni.navigateTo({
                    url: '../shop/detail/index?id=' + idParamAry[0] + '&shopName=' + idParamAry[1] + '&sell=1'
                });
            } else {
                uni.showToast({
                    title: '没有课程可以展示',
                    icon: 'success',
                    duration: 1000
                });
            }
        },

        toProductDetail: function (e) {
            var id = e.currentTarget.id;
            let userInfo = uni.getStorageSync('user');
            if (userInfo) {
              uni.navigateTo({
                  url: '../detail/index?id=' + id +'&inviteId=' + userInfo.userId
              });
            }else {
              uni.navigateTo({
                  url: '../detail/index?id=' + id
              });
            }
        },

        //处理分页
        bindlower: function () {
            if(this.timer != null){
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(()=>{
                this.getMoreData();
            },500)
        },
    }
};
</script>
<style lang="scss">
@import './index.scss';
</style>
